﻿﻿
<html lang="zh-CN">
<head>
    <meta charset="utf-8">


    <title> 上传文章</title>


    <!--自定义css-->



    <!--bootstrap css start-->
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <!--bootstrap css end-->

    <!--markdown css start-->
    <link rel="stylesheet" href="../editormd/css/style.css" />
    <link rel="stylesheet" href="../editormd/css/editormd.css"/>
    <link rel="stylesheet" href="../editormd/css/editormd_edit.css"/>
    <!--markdown css end-->
</head>

<body>

<!--顶部导航-->
<div class="panel panel-default" style="padding-top: 0px">
    <div class="panel-body">
        <a class="ksd-back float-left" href="javascript:void(0);" onclick="onBack()"> < 返回</a>
        <span class="sendbtn" onclick="addArticle()">发布文章</span>
<!--        <span class="sendbtn" style="background-color: #5cb85c">保存草稿</span>-->
    </div>
</div>

<div class="row">

    <!--文章标题输入框-->
    <div class="col-md-9 blog-main">
        <input type="text" style="text-indent: 1em;" name="topicTitle" class="bootstrap-tagsinput" placeholder="请输入文章标题" maxlength="100" id="title" value="" required="">
    </div>

    <!--下拉列表-->
    <div class="col-md-3">
        <select name="topicCategoryId" style="text-indent: 1em;" class="custom-select bootstrap-tagsinput d-block w-100" id="types">
        </select>

    </div>

    <!--文章描述输入框-->
    <div class="col-md-9 mt-3">
        <input type="text" name="topicDescription" class="bootstrap-tagsinput" placeholder="描述(用于展示首页上)" maxlength="250" style="text-indent: 1em;" id="topicDescription" value="" required="">
    </div>

    <!--标签列表-->
    <div class="col-md-3 mb-3 mt-3">
    <select multiple="multiple" name="topicCategoryId"  class="label-select bootstrap-tagsinput d-block w-100" id="labels">
    </select>
</div>

</div>





<div id="layout">
    <div id="test-editormd">
        <textarea id="input1" style="display:none;"></textarea>
    </div>
</div>

</body>

<!--markdown js start-->
<script src="../editormd/js/jquery.min.js"></script>
<script src="../editormd/js/editormd.min.js"></script>
<script src="../editormd/js/editormdEdit.js"></script>
<!--markdown js end-->

<script type="text/javascript">
    var testEditor;
    $(function() {
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 640,
            syncScrolling: "single",
            emoji: true,
            path: "../editormd/lib/",

            //图片上传
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : baseUrl + "education_api/article/upload",
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
        });
    });
</script>

<!--bootstrap js start-->
<script src="../js/bootstrap.min.js"/>
<!--bootstrap js end-->

<script src="../js/jquery-3.5.0.js"></script>
<script src="../js/http.js"></script>
<script src="../static/jquery/2.2.4/jquery.min.js"></script>


<script>
    // 获取用户对象
    let htmluser = JSON.parse(sessionStorage.getItem("User"));

    // 获取url参数，请求数据
    let articleId = null;
    let url = location.search;
    if (url.indexOf("?") != -1) {
        articleId = url.substr(1);
        console.log("11"+articleId)
    }

    // 定义下拉列表模板
    let htmlSelected = "<option value='{{id}}'>{{name}}</option>";

    $(function () {
        getUserLabel();
        getArticleType();
        getUrlArticle();

    })

    // 文章信息
    let dbArticle = {};

    // 获取文章信息
    function getUrlArticle() {

        if (articleId != null) {
            //
            $.ajax({
                xhrFields:{
                    withCredentials:true
                },
                type: "GET",
                //contentType: "multipart/form-data;charset=UTF-8",
                url: baseUrl + "education_api/article/getArticleDetail",
                data: {id: articleId},
                success: function (resp) {
                    //http 获得结果
                    console.log("=== 文章信息 ===");
                    console.log(resp.data);
                    dbArticle = resp.data;
                    // $.html("#contenthtml","11");

                    $("#title").val(resp.data.title);
                    testEditor.setMarkdown(resp.data.content.toString());
                    $("#topicDescription").val(resp.data.articleDescribe);


                    // 设置默认文章类型
                    console.log("=== 设置默认文章类型 ===");
                    let articleType = $('#types option');
                    for(let i =0;i<articleType.length;i++) {
                        if (articleType[i].value === resp.data.articleTypeId.toString()) {
                            articleType[i].setAttribute("selected", "selected");
                        }
                    }

                    // 设置默认文章类型
                    console.log("=== 设置默认标签 ===");
                    let label = $('#labels option');
                    for(let i =0;i<label.length;i++) {

                        for (let j = 0; j < resp.data.articleLabel.length ; j++) {
                            let id =resp.data.articleLabel[j].id;
                            if (label[i].value === id.toString()) {
                                label[i].setAttribute("selected", "selected");
                            }
                        }
                    }

                }
            });
        }
    };
    // 获取用户标签
    function getUserLabel() {

        let htmlLabel = "";

        $.ajax({
            xhrFields:{
                withCredentials:true
            },
            type: "POST",
            //contentType: "multipart/form-data;charset=UTF-8",
            url: baseUrl + "education_api/label/selectLabelByUserId",
            data:"userId="+htmluser.id,
            success: function (resp) {
                //http 获得结果
                console.log("=== 标签列表 ===");
                console.log(resp.data);
                resp.data.forEach(label =>{
                    htmlLabel += htmlSelected.replace("{{id}}",label.id).replace("{{name}}",label.labelName);
                })
                console.log(htmlLabel);
                $("#labels").html(htmlLabel);
            }
        });
    }
    // 获取文章类型
    function getArticleType() {

        let htmlArticleType = "";

        $.ajax({
            xhrFields:{
                withCredentials:true
            },
            type: "GET",
            //contentType: "multipart/form-data;charset=UTF-8",
            url: baseUrl + "education_api/article-type/selectArticleTypes",
            data: null,
            success: function (resp) {
                //http 获得结果
                console.log("=== 文章类型列表 ===");
                console.log(resp.data);
                resp.data.forEach(articleType =>{
                    htmlArticleType += htmlSelected.replace("{{id}}",articleType.id).replace("{{name}}",articleType.name);
                })
                console.log(htmlArticleType);
                $("#types").html(htmlArticleType);
            }
        });
    };

    // 修改文章
    function editArticle() {
        console.log("==  发送修改请求  ==")
        let htmlarticle = {
            id : articleId,
            title : $('#title').val(),
            content: testEditor.getMarkdown(),
            articleDescribe: $("#topicDescription").val(),
            articleTypeId :parseInt($('#types option:selected').val()),
            articleLabel:""
        }
        let labels = $('#labels option:selected');
        for (let i = 0; i < labels.length; i++) {
            if(i != labels.length - 1){
                htmlarticle.articleLabel += labels[i].value + ",";
            }else{
                htmlarticle.articleLabel += labels[i].value;
            }
        }

        console.log("修改后的文章：")
        console.log(htmlarticle);
        $.ajax({
            xhrFields:{
                withCredentials:true
            },
            type: "POST",
            url: baseUrl+"/education_api/article/updateArticleDetail",
            data: htmlarticle,
            success: function (resp) {
                //http 获得结果
                console.log("=== 修改类型列表 ===");
                console.log(resp.data);
                alert("修改成功")
                location.href = "../editor/editormd.html?" + htmlarticle.id;
            }
        });

    }

    function chargeArticleType() {
        let select=$('#types option:selected').val();
        console.log(select);
    }
    function chargeLabel() {
        let select=$('#labels option:selected').val();
        console.log(select);
    }

</script>
</html>

